<template>
  <header class="header header-page-bg">
    <div class="container">
      <div class="header-page-content">
        <div class="row align-items-center">
          <div class="col-md-7">
            <div class="header-content">
              <h1>Order Tracking</h1>
              <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                  <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                  <li class="breadcrumb-item active" aria-current="page">
                    Order Tracking
                  </li>
                </ol>
              </nav>
            </div>
          </div>
          <div class="col-md-5 d-none d-md-block">
            <div
              class="header-content-image header-content-abs-image header-content-abs-top"
            >
              <img
                src="assets/images/inner-page-header/page-1.png"
                alt="page"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>

  <section class="contact-form-section pt-100 pb-70">
    <div class="container">
      <div class="section-title section-title-lg">
        <h2>Let's Track Your Order</h2>
        <p>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
          oxnonumy eirmod tempor invidunt ut labore et dolore magna in aliquyam
          erat, sed diam voluptua.
        </p>
      </div>
      <div class="row">
        <div class="col-lg-6 pb-30">
          <div class="contact-form-item contact-form-image"></div>
        </div>
        <div class="col-lg-6 pb-30">
          <div class="contact-form-item contact-form-bg">
            <div class="sub-section-title">
              <h2 class="sub-section-title-heading">Tracking Procedure</h2>
            </div>
            <form class="contact-form">
              <div class="row">
                <div class="col-12">
                  <div class="form-group mb-20">
                    <label>Enter your tracking number</label>
                    <input
                      type="text"
                      name="number"
                      id="number"
                      class="form-control"
                      placeholder="1453-6753-2634-8735*"
                      required=""
                    />
                  </div>
                </div>
                <div class="col-12">
                  <div class="form-group mb-20">
                    <label>Enter billing email</label>
                    <input
                      type="text"
                      name="email"
                      id="email"
                      class="form-control"
                      placeholder="xyz@gmail.com"
                    />
                  </div>
                </div>
                <div class="col-12">
                  <button
                    class="btn main-btn main-btn-secondary full-width"
                    type="submit"
                  >
                    Track Now
                  </button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
  defineComponent,
} from "vue";

// const Component = defineComponent({});

const { proxy } = getCurrentInstance();

const props = defineProps({});

const data = reactive({});
const {} = toRefs(data);

onBeforeMount(() => {});
onMounted(() => {});

const methods = {};
</script>
<style lang="scss" scoped></style>
